<template>
  <div class="page-container">
    <el-form :model="search" :inline="true" size="small">
        <el-form-item label="分类状态:" prop="showStatus">
            <el-select v-model="search.showStatus" placeholder="请选择" clearable>
                <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="分类名称:" prop="keyword">
            <el-input v-model="search.name" placeholder="请输入分类名称" @change="filterSubmit"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="filterSubmit">查询</el-button>
            <el-button @click="filterReset">重置</el-button>
        </el-form-item>
    </el-form>
    <el-row>
        <el-button type="primary" size="small" @click="addClassify">添加分类</el-button>
    </el-row>
    <div class="table-box">
        <el-table :data="list" size="small" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="margin-top:10px">
            <el-table-column prop="name" label="分类名称"></el-table-column>
            <!-- <el-table-column prop="id" label="ID" align="center"></el-table-column> -->
            <el-table-column prop="icon" label="分类图标" align="center">
                <template #default="scope">
                    <el-image style="width: 40px; height: 40px" :src="scope.row.icon" fit="cover" :preview-src-list="[scope.row.icon]" :preview-teleported="true">
                        <template #error>
                            <div class="image-slot">
                                <el-icon><ele-Picture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" align="center"></el-table-column>
            <el-table-column prop="showStatus" label="状态" align="center">
                <template #default="scope">
                    <el-switch size="small" v-model="scope.row.showStatus" :active-value="1" :inactive-value="0" :active-text="scope.row.showStatus == 1 ? '显示' : '隐藏'" @change="changeStatus(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100px" align="center" fixed="right">
                <template #default="scope">
                    <el-button type="primary" link @click="handleEdit(scope.row)" size="small">编辑</el-button>
                    <el-button type="primary" link @click="delItem(scope.row)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
      <!--  <div class="page-block">
            <el-pagination
                v-model:currentPage="current"
                v-model:page-size="page"
                :page-sizes="[10, 20, 30, 40]"
                :small="true"
                :disabled="false"
                :background="false"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :hide-on-single-page="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div> -->
    </div>
    <classify-detail v-model:dialogDrawer="dialogFormVisible"  :title="title" :default-form="form" @onDetailSubmit="detailSubmit" :classify-list="classifyList"></classify-detail>
  </div>
</template>

<script>
import { reactive, toRefs,onMounted} from 'vue'
import { changeDetSelect,handleTree } from '/@/utils/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import ClassifyDetail from '../components/ClassifyDetail.vue'
import {getCategoryTree,remove,updateStatus,getCategoryList} from  '/@/api/pms/category'
export default {
    name: 'ClassifyList',
    components: {
        ClassifyDetail
    },
    setup() {
        const state = reactive({
            search: {
                showStatus: null,
                name: null,
                isWork: "1"
            },
            classifyList: [],
            statusList: [{
                label: '显示',
                value: 1
            },{
                label: '隐藏',
                value: 0
            }],
            list: [],
            total: 0,
            current: 1,
            page: 10,
            title: '新增分类',
            dialogFormVisible: false,
            form: {
                parentId: 0,
                name: '',
                icon: '',
                sort: 1,
                showStatus: 1
            },
            editId: '',
            dialogMaterialVisible: false
        })
        const handleChange = () => {
            getList()
        }
        const filterSubmit = () => {
            getList()
        }
        const getList = () => {
			getCategoryList(state.search).then(res =>{
			 state.list = handleTree(res.data,'id');
			})
		}
        const addClassify = () => {
            getClassifyTree()
            state.dialogFormVisible = true
            state.title = '新增分类'
            state.form.name = ''
            state.form.id = ''
            state.form.parentId = [0]
            state.form.showStatus = 1
            state.form.icon = ''
            state.form.sort = 1
            state.editId = ''
        }
        const getClassifyTree = () => {
			getCategoryTree({isWork: "1"}).then(res =>{
				state.classifyList = res.data
			})
		}
        const changeStatus = (row) => {
			updateStatus({id:row.id,showStatus:row.showStatus}).then(res=>{
				if(res.code == 0){
					ElMessage.success('修改成功')
				}else{
					ElMessage.error('修改失败:'+res.message)
				}
			})
        }
        const handleEdit = (row) => {
            getClassifyTree()
            state.editId = row.id
            const parentId = changeDetSelect(row.parentId, state.classifyList)
            state.form = {
                name: row.name,
                id: row.id,
                parentId: parentId.length < 1 ? ['0'] : parentId,
                showStatus: row.showStatus,
                icon: row.icon,
                sort: row.sort,
                images: [{name: 'images', url: row.icon}]
            }
            state.title = '编辑分类'
            state.dialogFormVisible = true
        }
        const delItem = row => {
            ElMessageBox.confirm(
                '是否确认删除名称为"' + row.name + '"的数据项？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
				remove(row.id).then(res=>{
					if(res.code == 0){
						ElMessage.success('删除成功')
						getList()
					}else{
						ElMessage.error('删除失败:'+res.message)
					}
				})
                
            }).catch()
        }
        const handleSizeChange = () => {
            getList()
        }
        const handleCurrentChange = e => {
            state.current = e
            getList()
        }
		const detailSubmit =() =>{
			getList()
			state.dialogFormVisible = false
		}
		const filterReset = () =>{
			state.search = {
				showStatus: null,
				name: null,
                isWork: "1"
			}
			console.log(state.search)
			getList()
		}
		onMounted(() => {
		    getList()
		})
        return {
            ...toRefs(state),
            filterSubmit,
            handleChange,
            addClassify,
            changeStatus,
            delItem,
            handleEdit,
            handleSizeChange,
            handleCurrentChange,
			getClassifyTree,
			detailSubmit,
			filterReset
        }
    }
}
</script>

<style lang="scss" scoped>
.table-box{
    background: var(--next-color-white);
    :deep(.el-table__header-wrapper .el-table__cell) {
        background: var(--el-color-primary-light-9);
        color: var(--next-bg-menuBar-light-1);
    }
}
</style>